<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
  </head>
  <body>
    
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    
    
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {
          
        },
        legend: {
        },
        dataset:[{
          dimensions:['product','2015','2016'],
          source: [
            ['衬衫',5,10],
            ['羊毛衫',20,10],
            ['雪纺衫',36,10],
            ['裤子',100,10],
            ['高跟鞋',10,10],
            ['袜子',20,10]
          ]
        },{
          transform:[{
            type: 'sort',
            config: {dimension:'2015',order:'asc'}
          },{
            type: 'filter',
            config: {dimension:'2015','>':10}
          }
    
        ]
        }],
        yAxis: {
          type: "category"
        },
        xAxis: {},
        series: [
          {
            type: 'bar',
            stack: 'total',
            emphasis: {        //高亮样式
              focus: 'series',        
              label: {          
                show: true,          
                position: 'top'        
              }      
            },
            datasetIndex:1
          },{
            type: 'bar',
            stack: 'total',
            datasetIndex:1
          },

        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>